<template>
  <div class='login-container'>
      <div class="login-form-wrap">
        <!-- logo部分 -->
          <div class="login-head">
              <div class="logo"></div>
          </div>
          <!-- 表单部分 要做表单验证必须加rlues、model、prop-->
          <!-- 如何选中某个组件？1.给组件添加ref属性2.通过this.$refs.ref名 来访问组件 -->
          <el-form class="login-form" ref="form" :rules="rules" :model="user">
              <el-form-item prop="mobile">
                <el-input v-model.trim="user.mobile" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-input v-model.trim="user.code" placeholder="请输入验证码"></el-input>
              </el-form-item>
              <el-form-item prop="agree">
                <el-checkbox v-model="user.agree">我已阅读并同意用户协议和隐私条款</el-checkbox>
              </el-form-item>
              <el-form-item>
                <!-- 按钮有loading属性，防止网络情况不好的时候用户一直点击按钮 -->
                <el-button :loading="loginLoading" class="login-btn" type="primary" @click="onLogin">登录</el-button>
              </el-form-item>
          </el-form>
      </div>
  </div>
</template>

<script>
import { userLogin } from '../../api/user.js';
import { setUser } from '../../utils/storage.js';
export default {
  name: 'Login',
  props: { },
  data () {
    return {
      // 表单验证规则,一个属性名就是一类验证规则
      rules: {
        mobile: [
          // required是否必须，message提示错误，trigger什么时候提示错误,失去焦点的时候
          { required: true, message: '必须要输入手机号', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不对', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '必须要输入验证码', trigger: 'blur' },
          { pattern: /^\d{6}$/, message: '验证码格式不对', trigger: 'blur' }
        ],
        // 自定义验证规则
        agree: [
          {
            // value:表示当前值
            // 验证通过： 直接写callback（）
            // 验证不通过： callback(new Error('错误消息'))
            validator: (rule, value, callback) => {
              if (value) {
                callback();
              } else {
                callback(new Error('请同意用户协议'));
              }
            },
            trigger: 'blur'
          }
        ]
      },
      // 设置数据项
      user: {
        mobile: '13911111111',
        code: '246810',
        agree: false // 是否同意协议
      },
      loginLoading: false // 登录按钮上的loading
    };
  },
  computed: { },
  created () { },
  mounted () { },
  methods: {
    onLogin () {
      //   if (!this.user.mobile || !this.user.code || !this.user.agree) return
      // 表单验证
      //   element-ui的form组件提供了一个整体的验证函数validate
      // 如何选中某个组件？1.给组件添加ref属性2.通过this.$refs.ref名 来访问组件
    //   this.$refs.form.validate(valid => {
    //     console.log(valid)
    //     if (valid) {
    //     // 验证成功
    //     // 开启按钮上的loading效果
    //       this.loginLoading = true
    //       // 简单判空之后发送ajax请求
    //       // 代码语义化 ：封装用户相关操作,按需导出
    //       // 把this.$http.post('/mp/v1_0/authorizations', this.user) 换成userLogin(this.user.mobile, this.user.code)
    //       userLogin(this.user.mobile, this.user.code).then(res => {
    //         console.log('用户登录', res.data)
    //         // 当我们引入了ElementUI时，它会给Vue的原型上添加一个名为$message的方法。
    //         this.$message.success('登录成功啦')
    //         // 关闭loading状态
    //         this.loginLoading = false

      //         // 将token存储到本地
      //         // window.localStorage.setItem('userInfo', JSON.stringify(res.data.data))
      //         setUser(res.data.data)

      //         // 跳转到主页
      //         this.$router.push('/')
      //       }).catch(err => {
      //         console.log(err)
      //         this.$message.error('登录出错了')
      //         // 关闭loading状态
      //         this.loginLoading = false
      //       })
      //     }
      //   })
      this.$refs.form.validate(async valid => {
        if (!valid) return;
        this.loginLoading = true;
        try {
          const res = await userLogin(this.user.mobile, this.user.code);
          this.$message.success('登录成功啦');
          this.loginLoading = false;
          setUser(res.data.data);
          this.$router.push('/');
        } catch (err) {
          this.$message.error('登录出错了', err.message);
          this.loginLoading = false;
        }
      });
    }
  }
};
</script>

<style scoped lang='less'>
// 铺满整屏
.login-container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  background: url("../../assets/login_bg.jpg") no-repeat;
  background-size: cover;
  .login-form-wrap {
    min-width: 300px;
    padding: 30px 50px 10px;
    background-color: #fff;
    .login-head {
      display: flex;
      justify-content: center;
      .logo {
        width: 200px;
        height: 57px;
        background: url("../../assets/logo_index.png") no-repeat;
        background-size: contain;
      }
    }
    .login-form {
      .login-btn {
        width: 100%;
      }
    }
  }
}
</style>
